<template>
  <div class="app-container">
    <div class="system text-center">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="企业Logo">
          <companyLogo ref="companyLogo" :user="user" />
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;" type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import companyLogo from "./companyLogo";
import { getCompanyConfig, updateCompanyConfig } from "@/api/vadmin/system/config";
export default {
  components: { companyLogo },
  data() {
    return {
      ruleForm: { name: "" },
      user: "",
      // 表单校验
      rules: {
        name: [
          { required: true, message: "不能为空", trigger: "blur" }
        ]
      }
    };
  },
  // created() {
  //   this.getCompanyConfig();
  // },
  mounted() {
    this.$nextTick(() => {
      this.getCompanyConfig();
    });
  },
  methods: {
    getCompanyConfig() {
      getCompanyConfig().then(res => {
        if (res.code === 200) {
          this.user = res.data["company.logo_base64"];
          this.ruleForm.name = res.data["company.name"];
          this.$store.dispatch("settings/SetTitle", this.ruleForm.name);
          this.$store.dispatch("settings/SetLogo", this.user);
        }
      });
    },
    submitForm() {
      const obj = {
        "company.name": this.ruleForm.name,
        "company.logo_base64": this.$refs["companyLogo"].options.img
      };
      updateCompanyConfig(obj).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功");
          this.getCompanyConfig();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 40px 20px;
  height: calc(100vh - 145px);
}
.system{
  width: 500px;
}
</style>
